<template>
	<!-- {{currentItem.itemTopic[2].itemTopicOption[scoreQuset]}} -->
	<h1>{{currentItem.itemName}}	</h1>
	<div class="quest_sort">
		<p>{{ currentItem.sort }}.{{ currentItem.name }}</p>
		<img src="@/assets/image/other/horn.png" alt="" style="width: 5%;" @click="onHorn">
	</div>
	<div class="quest_cont">
		<div class="img_box">
			<!-- {{currentItem.userAnswer}} -->
			<img :src="currentItem.userItemRecordAnswer ? currentItem.userItemRecordAnswer :''" alt="">
		</div>
		<!-- v-if="currentItem.itemTopicOption" -->
		<!-- {{currentItem}} -->
		<div class="bottom_btn">
			<p v-if="currentItem.userItemRecordAnswer">请依次根据评分标准点击正确与否</p>
			<div v-if="currentItem.userItemRecordAnswer">
				<!-- <MyButton class="primary" @click="onPrint(item)" :title="itm.name" v-if="currentItem.itemTopic[2].itemTopicOption[scoreQuset].children.length === 0" />
				<template v-else>
					<p>{{currentItem.itemTopic[2].itemTopicOption[scoreQuset].name}}</p>
					<div class="primary_btn">
						<template v-for="itm,idx in currentItem.itemTopic[2].itemTopicOption[scoreQuset].children" :key="idx">
							<MyButton class="primary" @click="onPrint2(currentItem.itemTopic[2].itemTopicOption,itm)" :title="itm.name" />
						</template>
					</div>
				</template> -->
				<!-- {{currentItem.itemTopicOption[scoreQuset]}} -->
				<MyButton class="primary" @click="onPrint(item)" :title="currentItem.itemTopicOption[scoreQuset].name" v-if="currentItem.itemTopicOption[scoreQuset].children.length === 0" />
				<template v-else>
					<p>{{currentItem.itemTopicOption[scoreQuset].name}}</p>
					<div class="primary_btn">
						<template v-for="itm,idx in currentItem.itemTopicOption[scoreQuset].children" :key="idx">
							<MyButton class="primary" @click="onPrint2(currentItem.itemTopicOption,itm)" :title="itm.name" />
						</template>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>


<script setup lang="ts">
	import { onMounted,ref, computed,watch } from "vue";
	import { useWorkBenches, useWebstock } from '@/store';
	
	const PROPS = defineProps({
		currentItem: {
			type: Object,
			default() {
				return {};
			},
		},
	});
	const EMITS = defineEmits(['onQuest']);
	const Workben = useWorkBenches();
	const webstockStore = useWebstock();
	const scoreQuset = ref(0);
	const selectArr = ref([]);
	
	const currentSort = computed(()=> Workben.$state.currentSort)
	// const currentQuest = ref<any>({});
	const currentAnswer = computed(()=> Workben.$state.currentAnswer);
	
	const onPrint = (row)=>{
		const currentId = localStorage.getItem('currentId');
		webstockStore.sendMessage({
			messageCode:'7',userId: currentId,adminAnswer:row.name,
			userItemRecordAnswerId:currentAnswer.value.userItemRecordAnswerId ,
			itemTopicOptionIdList:row.topicId
		});
	};
	
	const onPrint2 = (row,itm)=>{
		selectArr.value.push(itm);
		if(row.length-1 == scoreQuset.value){
			onPrint({ name:'', topicId:selectArr.value.map((item)=> item.id) });
			console.log('全部');
		}else{
			scoreQuset.value++;
		}
		// if(scoreQuset)
		// console.log(itm)
	};
	
	// function selectArrFn(id){
	// 	const arr =  selectArr.value.filter((item)=> item.id == id);
	// 	if(arr.length >0) return true;
	// 	return false;
	// }
	
	const onSelect = (row)=>{
		// const { id, option } = row;
		// const arr = selectArr.value.filter((item)=> item.option == option);
		// console.log(arr,"arr")
		// if(arr.length > 0){
		// 	selectArr.value = selectArr.value.map((item)=> ({ ...item, id:item.option == option?id:item.id }))
		// }else{
		// 	selectArr.value.push({ option,id });
		// }
		console.log(row, 'dd');
	};
	
	// watch(()=>[currentSort.value,PROPS.currentItem],()=>{
	// 	console.log(currentSort.value)
	// 	currentQuest.value = PROPS.currentItem.itemTopic[currentSort.value];
	// 	EMITS('onQuest', currentQuest.value);
	// },{ immediate:true });
	
	// onMounted(()=>{
		// currentSort.value = localStorage.getItem('currentSort');
		// 
		// EMITS('onQuest', currentQuest.value);
	// });
</script>


<style lang="less" scoped>
	@import "../index.less";
	// .quest_cont{
		// font-size: 20px;
	// }
	.primary_name{
		font-size: 20px;
	}
	.primary_child{
		display: flex;
		flex-direction: column;
	}
	.bottom_btn{
		display: flex;
		flex-direction: column;
		width: 30%;
		font-size: 20px;
		.primary_btn{
			display: flex;
			justify-content: center;
		}
		>div{
			flex:1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
	.img_box{
		flex:1;
		background-color: #ccc;
		img{
			border: 1px solid #ccc;
			background-color: @white;
		}
		display: flex;
		align-items: center;
		justify-content: center;
		// margin: 0 100px;
		// border: 1px solid #ccc;
		// width:200px;
	}
</style>